<template>
  <div class="api">
    <el-row :gutter="10">
      <el-col :span="5">
        <el-card shadow="never">
          <Catree ref="Ctree" />
        </el-card>
      </el-col>
      <el-col :span="19">
        <el-card shadow="never" class="apiTop">
          <el-row class="search" :gutter="10">
            <el-col :span="10">
              <el-input v-model="inputstr" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="2" class="search">
              <el-button type="primary" plain style="width: 100%;" icon="el-icon-search" @click="onSearch">搜索
              </el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2">
              <el-button type="primary" style="width: 100%;" @click="apiAdd">新增接口</el-button>
            </el-col>
          </el-row>
        </el-card>
        <el-card shadow="never" class="apiCard">
          <el-table :data="apidata" style="width: 100%" stripe border>
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="id" label="接口编号" width="80"></el-table-column>
            <el-table-column prop="name" label="接口名称" width="230" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="apimethod" label="接口类型" width="80" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="api" label="接口路径" width="350" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop label="创建时间" width="193" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ myDate(scope.row.create_time) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="create_user" label="创建者" width="" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="操作" fixed="right" width="180">
              <template slot-scope="scope">

                <el-tooltip class="item" effect="dark" content="详情" placement="top-start">
                  <el-button type="success" icon="el-icon-document" circle size="mini" @click="clickView(scope.row.id)">
                  </el-button>
                </el-tooltip>

                <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                  <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="clickUpdata(scope.row.id)">
                  </el-button>
                </el-tooltip>
                <!-- warning -->
                <el-tooltip class="item" effect="dark" content="MOCK" placement="top-start">
                  <el-button :type="setButtonType(scope.row.ismock)" :icon="setMockButIco(scope.row.ismock)" circle size="mini" @click="clickMock(scope.row)">
                  </el-button>
                </el-tooltip>

                <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                  <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="clickDel(scope.row.id)">
                  </el-button>

                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>

           <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
            >
            </el-pagination>
          </div>

        </el-card>
      </el-col>
    </el-row>
    <updataApiDilalog ref="updataApi" />
  </div>
</template>

<script>
  import Catree from "@/views/manage/common/Catree";
  import { getApidata, queryApi, delApi, setApimock} from "@/network/networks";
  import { myDate } from "@/assets/js/common";
  import updataApiDilalog from "./apiChildren/updateApiDialog"
  
  export default {
    components: {
      Catree,
      updataApiDilalog,
    },

    data() {
      return {
        inputstr: "",
        apidata: [],
        node: {
          nodeid: 0,
          level: 0
        },
        cat_type: 0 ,          //用来控制树展示

        //page分页
      currentPage:1,
      totalCount:0,
      pageSize:10,
      };
    },

    mounted() { 
      // this.onSearch()
    },

    methods: {

      getCattype() {
        return this.cat_type;
      },

      //设置mock按钮类型
      setButtonType(ismock) {
        if(ismock == 1){
          return "success"
        }else{
          return "warning"
        }
      },


      //设置mock按钮图标
      setMockButIco(ismock) {
        if(ismock == 1){
          return "el-icon-open"
        }else{
          return "el-icon-turn-off"
        }
      },

      //设置节点id
      setNodeid(data) {
        this.node.nodeid = data["id"];
        this.node.level = data["level"];
        this.currentPage = 1;
        this.getApi();
      },

      //查看数据
      clickView(id) {
        this.$refs.updataApi.able = true;
        this.$refs.updataApi.showDialog = true;
        this.$refs.updataApi.rowid = id;
      },

      //编辑数据
      clickUpdata(id) {
        this.$refs.updataApi.able = false;
        this.$refs.updataApi.showDialog = true;
        this.$refs.updataApi.rowid = id;
      },

      //接口MOCK
      clickMock(row) {
        let mock_status = 0
          if(row.ismock == 0){
            mock_status = 1
          }else{
            mock_status = 0
          }
          setApimock({
            id: row.id,
            ismock: mock_status
          }).then(res => {
            if(res.code == 0){
              this.$message.error(res.msg);
              return;
            }
            this.$message.success(res.msg)
            this.getApi()
          })
       },

      //测试接口请求
      clickDel(id) {
        delApi({
          "id":id
        }).then(res => {
          if(res.code == 0){
            this.$message.error(res.msg)
            return
          }
          this.$message.success(res.msg)
          this.getApi()
        }).catch(err => {
          this.$message.error(err)
        })
       },


      //新增接口
      apiAdd() {
        if (this.node.level != 3) {
          this.$message({
            message: "请选择三级节点",
            type: "warning"
          });
          return;
        }
        this.$router.push({
          path: '/apiadd',
          name: 'AD',
          params: {
            nodeid: this.node.nodeid
          }
        })
      },

      getApi() {
        var redata = {}
        redata.nodeid = this.node.nodeid
        redata.level = this.node.level
        redata.currentPage = this.currentPage
        redata.pageSize = this.pageSize
        redata.inputstr = this.inputstr
        getApidata(redata).then(res => {
          // this.$message.success(res.msg);   //提示太频繁，注释
        this.apidata = res.data.apis;
        this.totalCount = res.data.totalCount;
        });
      },

      //查询接口
      onSearch() {
        this.getApi()
        // queryApi({
        //   "inputstr": this.inputstr
        // }).then(res => {
        //   if (res.code == 0) {
        //     this.$message.error(res.msg)
        //     return
        //   }
        //   // this.$message.success("数据查询成功")
        //   this.apidata = res.data
        // })
      },

      myDate(time) {
        return myDate(time);
      },

      //设置每页多少条
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize=val
        this.currentPage=1
        this.getApi()
      },

      //切换页数据
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage=val
        this.getApi()
      }
    }
  };
</script>

<style lang="less" scoped>
  .search {
    bottom: 10px;
  }

  .apiCard {
    margin-top: 15px;
  }
</style>